$sideNavBorderColor : #E0E0E0;

.sideNav {
  @media(min-width: $break-tablet-min) {
    height: 100%;
    width: $sideNavWidth;
    position: fixed;
    left: 0;
    z-index: $sideNav-zindex;
    overflow: auto;
    padding-bottom: 100px;
    background-color: $brand-gray;
    border-right: 1px solid $brand-gray;
    a {
      display: block;
      text-decoration: none;
    }
  }

  @media(max-width: $break-tablet-max) {
    @include mobileMenuBase;
  }
}

.sideNav-mobileClose {
  @media(min-width: $break-tablet-min) {
    display: none;
  }

  @media(max-width: $break-tablet-max) {
    display: block;
    text-align: right;
    > a {
      display: inline-block;
      padding: 8px;
      color: $brand-black;
    }
    .fa {
      font-size: 1.5rem;
      vertical-align: text-bottom;
    }
  }
}

.sideNav-inner {
  @media(max-width: $break-tablet-max) {
    @include mobileMenuInnerBase;
  }
}

.sideNav-mobileBackground {
  @media(min-width: $break-tablet-min) {
    display: none;
  }

  @media(max-width: $break-tablet-max) {
    @include mobileMenuBackgroundBase;
  }
}

.sideNav-categoryName {
  background-color: #DDDDDD;
  margin:0;
  font-size: 0.9rem;
  font-weight:bold;
  color: $brand-black;
  padding:$grid-basic 4px;
  @media(max-width: $break-tablet-max) {
    margin-bottom: $grid-basic/2;

    + ul {
      > li > a {
        border-top:none;
      }
    }
  }
}

.sideNav-section {
  margin-bottom:$grid-basic;
  > li > a { //section
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:$grid-basic $grid-basic $grid-basic/2 $grid-basic/2;
    margin-bottom: $grid-basic/2;
    color: $brand-black;
    font-size: 0.8rem;
    border-top: 1px solid #DDD;
    &:after {
      content: "\f107";
      font: normal normal normal 14px/1 FontAwesome;
      margin-right: 10px;
    }
  }

  @media(max-width: $break-tablet-max) {
    margin-bottom: 0;
    > li > a {
      padding: $grid-basic;
      font-size: 1rem;
      &:active,
      &:focus {
        text-decoration: none;
      }
    }
  }
}

.sideNav-articles {
  > li > a {//article
    padding: 4px 4px 4px $grid-basic*2;
    font-size: 0.8rem;
    &:hover {
      background-color: #E3E3E3;
    }
    &.currentArticle {
      color: $brand-black;
      border-left:4px solid #60E2FF;
      padding-left: ($grid-basic*2) - 4;
      border-bottom: 1px solid #60E2FF;
      background-color: rgba(96, 226, 255, 0.22);
      &:hover {
        text-decoration: none;
      }

    }
  }

  @media(max-width: $break-tablet-max) {
    > li > a {
      display: block;
      padding: $grid-basic 0 $grid-basic $grid-basic*2;
      font-size: 1rem;
      margin-bottom: $grid-basic/2;
    }
  }
}

.sideNav-section .sideNav-articles {
  display: none;
}
.sideNav-section.open {
  > li > a:after {
    content: "\f106";
    font: normal normal normal 14px/1 FontAwesome;
  }
  .sideNav-articles {
    display: block;
  }
}